<template>
  <div id="divbox">
    <!-- 【此图像是圆圈头像logo】 -->
    <img
      src="https://ts1.cn.mm.bing.net/th/id/R-C.3aeeb6d5725738095a7ad521d46ce428?rik=prLV4puYz%2btYuw&riu=http%3a%2f%2fwww.gx8899.com%2fuploads%2fallimg%2f2018021008%2fjrmgrhcgro0.jpg&ehk=Im%2fy1GA0xuqdwYNnKtzfue2b09jzjym4jjUXy7e0Seo%3d&risl=&pid=ImgRaw&r=0"
      alt="Your Image">
    <div class="login-form">
      <div id="logo">
				<span style="font-weight: bold; font-size: 40px;">
					&nbsp;<span style="color:#4F5155"> 欢迎登录</span>
				</span>
      </div>
      <el-form ref="refform" :model="form">

        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" class="input"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" class="input"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit('refform')" style="width: 300px;">登录</el-button>
          <br/>
          <router-link to="register" style="color: #006A5A;">没有账号？点击注册</router-link>

        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        form: {
          phone: '',
          password: '',
        },
        rules: {
          phone: [{
            required: true,
            message: '请输入手机号！',
            trigger: 'blur'
          }
          ]
        }
      }
    },
    methods: {
      onSubmit (reffrom) {//【登录】
        var data = {
          password: this.form.password,
          phone: this.form.phone
        }
        this.$http.getLogin('user/wx/login', data).then(res => {
          if (res !== undefined) {
            if (res.data.code == 200) {
              //存储token
              this.$token.setToken(res.data.data)
              //跳转页面
              // this.$router.push('/login')

            } else if (res.data.code == 500) {
              this.$message({showClose: false, message: res.data.message})
              this.$message(res.data.message)
            }
          } else {
            this.$message({showClose: false, message: '登陆失败'})
          }
        })
      }
    }
  }
</script>

<style scoped>


  #divbox {
    width: 100%;
    height: 100vh;
    background-image: url("https://ts1.cn.mm.bing.net/th/id/R-C.b923d0630782b4e46dcbb2121b22bdbf?rik=l7wVr9wcUyyTzw&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f68%2f768.jpg&ehk=anhoZ%2fxmeecIhRHc2n9reoQbtJ2xXrvIEx0sJbLLMiI%3d&risl=&pid=ImgRaw&r=0");
    /*将🎀页面背景  图片路径替换为你自己的图片路径*/
    background-size: cover;
    /*保持图片比例并完全覆盖元素*/
    background-position: center center;
    /*将图片居中对齐*/
    margin: auto;
    text-align: center;
  }

  .login-form {
    width: 442px;
    height: 400px;
    background-color: rgba(248, 242, 235, 0.5);
    position: relative;
    left: 455px;
    top: 170px;
  }

  #logo {
    width: 100%;
    height: 60px;
    background-color: aquamarine;
    margin-bottom: 60px;
  }

  .input {
    max-width: 300px;
  }

  img {
    border-radius: 50%;
    width: 100px;
    position: absolute;
    left: 638px;
    top: 50px;
  }
</style>
